$(function () {
    $("#head").load("/html/head.html");
    $("#foot").load("/html/foot.html");
    seletProducts();
    let main = localStorage.getItem("main-product");
    if (main != null){
        slectProductClassify(main);
        localStorage.removeItem("main-product");
    }
})

function seletProducts() {
    let data1 = {pageNumber: 1};
    let data = myAjax("/product", data1, "get");
    let list = data.list;
    let productClassifylist = data.productClassifylist;
    let productlist = data.productlist;
    let countPage = data.countPage;
    localStorage.setItem("countProductPage", countPage);

    //当前位置
    $("#main").attr("href", list[0].href);
    $("#main").text(list[0].title);
    $("#now").attr("href", list[2].href);
    localStorage.removeItem("classifyProduct");
    $("#now").text(list[2].title);
    //productclassify 进行分页
    let html = '';
    for (let i = 0; i < productClassifylist.length; i++) {
        let t = i + 1;
        html += '<div onclick="slectProductClassify(' + t + ')" id="classify'+t+'">' + productClassifylist[i].name + '</div>'
    }
    $("#links").html(html);
    //product内容======
    let html1 = '';
    for (let i = 0; i < productlist.length; i++) {
        html1 += '<div class="productAll" onclick="showProduct('+productlist[i].id+')">\n' +
            '                <div><img src="/back/img' + productlist[i].img + '" width="100%" height="100%"/></div>\n' +
            '                <div>' + productlist[i].name + '</div>\n' +
            '                <div>' + productlist[i].classifyName + '</div>\n' +
            '                <div>' + productlist[i].diliver + '</div>\n' +
            '            </div>'
    }
    $("#product").html(html1);
//分页条
    let page = '';
    for (let i = 1; i <= countPage; i++) {
        page += '<div onclick="selectPage(' + i + ',' + countPage + ')" id="pageNumber' + i + '">' + i + '</div>'
    }
    $("#page").html(page);
    $("#pageNumber1").css("background-color", "black");
    $("#pageNumber1").css("color", "white");
}
//通过类别 来查询数据的值===============================
function slectProductClassify(classify) {

    let data = myAjax("/product", {classify: classify}, "get");
    //将 点击的分类 放入 localStorage中， 方便后续 拿到分类======
    localStorage.setItem("classifyProduct", classify);
    let productClassifylist = data.productClassifylist;
    //将类别的信息的div变颜色
    for (let i = 1;i<=productClassifylist.length;i++){
        $("#classify"+i+"").css("background-color","black");
    }
    $("#classify"+classify+"").css("background-color","#0accce");
    let productlist = data.productlist;
    let countPage = data.countPage;
    //将 总条数放入 localStorage， 方便分页（总条数的分页 和 总类别的条数）=====
    localStorage.setItem("countProductPage", countPage);
    //渲染 总的 数据================================
    let html1 = '';
    for (let i = 0; i < productlist.length; i++) {
        html1 += '<div class="productAll" onclick="showProduct(' + productlist[i].id + ')">\n' +
            '        <div><img src="/back/img' + productlist[i].img + '" width="100%" height="100%"/></div>\n' +
            '                <div>' + productlist[i].name + '</div>\n' +
            '                <div>' + productlist[i].classifyName + '</div>\n' +
            '                <div>' + productlist[i].diliver + '</div>\n' +
            '            </div>'
    }
    $("#product").html(html1);
    //渲染分页===================================
    let page = '';
    for (let i = 1; i <= countPage; i++) {
        page += '<div onclick="selectPage(' + i + ',' + countPage + ')" id="pageNumber' + i + '">' + i + '</div>'
    }
    $("#page").html(page);
    $("#pageNumber1").css("background-color", "black");
    $("#pageNumber1").css("color", "white");
}
//  分页查询 赋值~~~~~~===============================
function selectPage(i, n) {
    for (let t = 1; t <= n; t++) {
        $("#pageNumber" + t + "").css("background-color", "white");
        $("#pageNumber" + t + "").css("color", "black");
    }
    $("#pageNumber" + i + "").css("background-color", "black");
    $("#pageNumber" + i + "").css("color", "white");

    let classify = localStorage.getItem("classifyProduct") == null ? 0 : localStorage.getItem("classifyProduct");
    let data = myAjax("/product", {pageNumber: i, classify: classify}, "get");
    let productlist = data.productlist;
    let html1 = '';
    for (let i = 0; i < productlist.length; i++) {
        html1 += '<div class="productAll" onclick="showProduct()">\n' +
            '                <div><img src="/back/img' + productlist[i].img + '" width="100%" height="100%"/></div>\n' +
            '                <div>' + productlist[i].name + '</div>\n' +
            '                <div>' + productlist[i].classifyName + '</div>\n' +
            '                <div>' + productlist[i].diliver + '</div>\n' +
            '            </div>'
    }
    $("#product").html(html1);
}
//查询第一页 最后一页===================================
function firstPage() {
    let countPage = localStorage.getItem("countProductPage");
    selectPage(1, countPage);
}

function endPage() {
    let countPage = localStorage.getItem("countProductPage");
    selectPage(countPage, countPage);
}

//点击图片 弹出总的 商品信息
function showProduct(id) {
    let data = myAjax("/product/findById", {id: id}, "get");
    let productModel = data.productModel;
    let html='<div  class="productMain">\n' +
        '    <div>\n' +
        '        <div class="productImg"><img src="/back/img/'+productModel.img+'" height="240px" width="250px"/></div>\n' +
        '        <div class="productName">' +
        '           <div>'+productModel.name+'</div>'+
        '           <div>市场价：'+productModel.averageprice+'</div>'+
        '           <div>价格：<span>'+productModel.price+'</span></div>'+
        '        </div>\n' +
        '    </div>\n' +
        '    <div>'+productModel.diliver+'</div>\n' +
        '    <div>' +
        '       <div>产品编号：<br>'+productModel.name+'</div>' +
        '       <div>产品说明：<br>'+productModel.content+'</div>' +
        '       <div>递送信息：<br>'+productModel.diliver+'</div>' +
        '       <div>质量认证：<br>'+productModel.quality+'</div>' +
        '       <div>付款方式：<br>'+productModel.payment+'</div>' +
        '       <div>包装信息：<br>'+productModel.information+'</div>' +
        '</div>\n' +
        '</div>';
    $("#product").html(html);
    let html1='';
    $("#fenye").html(html1);
}
